header {
    position: relative;
    padding: 5px;
    border-radius: 5px;
    background-image: url(../image/beijing.jpg);
    background-size: cover;
}

nav {
    width: 98%;
    overflow: hidden;
    margin: 10px auto;
    font-size: 14px;
    color: white;
}

.nav1,
.nav2 {
    height: 40px;
    float: left;
    font-weight: bold;
}

.nav1 {
    width: 33%;
    line-height: 40px;
}

.nav1 li {
    margin-left: 5px;
    margin-right: 10px;
    float: left;
}

nav li a {
    color: white;
}

.sousuo {
    width: 30%;
    overflow: hidden;
    float: left;
}

.sousuo input {
    width: 90%;
    height: 40px;
    border-radius: 5px;
    background-color: #f1f2f3a7;
}

.sousuo img {
    width: 20px;
    margin-left: 5px;
}

.denglu {
    width: 40px;
    height: 40px;
    line-height: 40px;
    float: left;
    border-radius: 50px;
    text-align: center;
    color: white;
    background-color: #00aeec;
}

.nav2 {
    width: 25%;
}

.nav2 li {
    width: 14%;
    margin-left: 5px;
    text-align: center;
    float: left;
}

.nav2 li:last-child {
    width: 18%;
}

.nav2 img {
    margin: auto;
}

.tougao {
    width: 7%;
    height: 35px;
    line-height: 35px;
    float: left;
    border-radius: 5px;
    background-color: #fb7299;
}

.tougao img {
    margin: 8px 3px 5px 18px;
    float: left;
}

.tougao span {
    float: left;
    color: white;
}

nav img {
    width: 18px;
}

.logo {
    width: 162px;
    margin: 5px 50px;
}

/* 导航栏 */
.youxi {
    width: 28%;
    position: absolute;
    top: 80px;
    left: 50px;
    padding: 20px;
    border-radius: 5px;
    display: none;
    color: black;
    background-color: white;
}

.yx:hover .youxi {
    display: block;
}

.youxi1 {
    width: 60%;
    float: left;
    font-size: 13px;
    font-weight: 500;
}

.youxi1 div {
    position: relative;
}

.youxi1 div img {
    width: 90%;
    border-radius: 5px;
}

.youxi1 div p {
    position: absolute;
    bottom: 10px;
    left: 5px;
    font-size: 14px;
    color: white;
}

.youxi1 ul {
    overflow: hidden;
    margin-top: 10px;
}

.youxi1 li {
    width: 27%;
    float: left;
    margin: 0px;
    margin-right: 10px;
}

.youxi1 ul img {
    width: 100%;
}

.youxi1 ul p {
    height: 40px;
    line-height: 20px;
    overflow: hidden;
}

.youxi1 ul p:hover {
    color: #00aeec;
}

.youxi2 {
    width: 32%;
    float: right;
    padding: 0px 15px;
    border-left: 2px solid #9499a0;
}

.youxi2>p,
.manhua2>p,
.saishi2>p {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: bold;
}

.youxi2 li {
    width: 100%;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #61666d;
}

.youxi2 li:hover {
    color: #00aeec;
}

/* 游戏隐藏栏 */
.manhua {
    width: 30%;
    padding: 15px;
    position: absolute;
    top: 80px;
    left: 100px;
    border-radius: 5px;
    display: none;
    color: black;
    background-color: white;
}

.mh:hover .manhua {
    display: block;
}

.manhua1 {
    width: 65%;
    float: left;
    overflow: hidden;
}

.manhua1 div {
    width: 45%;
    line-height: 25px;
    float: left;
    margin: 10px 0px;
    margin-right: 10px;
}

.manhua1 img {
    width: 100%;
    border-radius: 5px;
}

.manhua1 p,
.manhua2 li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
}

.manhua1 p:hover {
    color: #00aeec;
}

.manhua2 {
    width: 30%;
    padding: 10px;
    float: right;
    border-left: 1px solid #9499a0;
}

.manhua2 ol {
    line-height: 30px;
    font-size: 13px;
    color: #61666d;
}

/* 漫画隐藏栏 */
.saishi {
    width: 35%;
    padding: 10px;
    position: absolute;
    top: 80px;
    left: 200px;
    border-radius: 5px;
    display: none;
    color: black;
    background-color: white;
}

.ss:hover .saishi {
    display: block;
}

.saishi1 {
    width: 55%;
    float: left;
}

.saishi1>img {
    width: 98%;
    border-radius: 5px;
}

.saishi1 div img {
    width: 46%;
    float: left;
    margin: 5px 0px;
    margin-right: 10px;
    border-radius: 5px;
}

.saishi2 {
    width: 40%;
    line-height: 30px;
    padding: 10px;
    border-left: 1px solid #9499a0;
    float: right;
}

.saishi2 ul,
.saishi2 ol {
    overflow: hidden;
}

.saishi2 ul p,
.saishi2 ol p {
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
}

.saishi2 ol img {
    float: left;
    margin: 5px;
}

.saishi2 ol p {
    width: 75%;
}

.saishi2 ul p {
    width: 55%;
}

.saishi2 ul input {
    width: 15%;
    margin: 5px;
    float: left;
    border: 2px solid #fb7299;
    border-radius: 5px;
    font-size: 12px;
    color: #fb7299;
    background-color: white;
}

/* 赛事隐藏栏 */
.xiazai {
    width: 20%;
    padding: 15px;
    position: fixed;
    top: 80px;
    left: 300px;
    border-radius: 5px;
    display: none;
    color: black;
    background-color: white;
}

.xz:hover .xiazai {
    display: block;
}

.xiazai1 {
    overflow: hidden;
}

.xiazai1 div {
    width: 35%;
    padding: 0px 15px;
    text-align: center;
    float: left;
}

.xiazai1 p {
    height: 20px;
}

.xiazai1 img {
    width: 80%;
    float: left;
    margin: 0px 15px;
    margin-top: 30px;
}

.xiazai div p:nth-child(2) {
    font-size: 12px;
    color: #727272;
}

.xiazai1 div:last-child img {
    width: 55%;
    margin: 0px 25px;
    margin-top: 35px;
}

.xiazai1 input {
    width: 80%;
    height: 30px;
    margin-top: 5px;
    border-radius: 5px;
    color: white;
    background-color: #00aeec;
}

.xiazai2 {
    width: 50%;
    margin: 10px auto;
    overflow: hidden;
}

.xiazai2 p {
    width: 80%;
    line-height: 20px;
    float: left;
    font-size: 12px;
    color: #727272;
}

.xiazai2 img {
    margin: 3px 0px;
    float: left;
}

/* 下载客户端 */
.dl {
    float: left;
    color: black;
}

.denglu1 {
    width: 25%;
    padding: 15px 10px;
    position: absolute;
    top: 80px;
    right: 23%;
    border-radius: 5px;
    transition: opacity 0.5s ease;
    opacity: 0;
    background-color: white;
}

.dl:hover .denglu1 {
    opacity: 1;
}

.denglu1>p {
    font-weight: 500;
}

.denglu1 ul {
    padding: 5px;
    overflow: hidden;
}

.denglu1 li {
    width: 45%;
    height: 30px;
    line-height: 30px;
    margin-right: 5px;
    overflow: hidden;
    float: left;
    font-size: 14px;
}

.denglu1 li img {
    width: 10%;
    margin: 8px 5px;
    float: left;
}

.denglu1 li p {
    float: left;
}

.denglu1 input {
    width: 80%;
    height: 35px;
    margin: 5px 8%;
    border-radius: 5px;
    color: white;
    background-color: #00aeec;
}

.denglu2 {
    text-align: center;
    margin: 10px auto;
}

.denglu2 a {
    color: #00aeec;
}

/* 登录隐藏栏 */
.nav1 li:hover {
    animation: youxi 0.2s ease-out;
}

@keyframes youxi {
    50% {
        transform: translate(0px, -5px);
    }
}

.nav2 li:hover img {
    animation: anima 0.2s ease-out;
}

@keyframes anima {
    50% {
        transform: translate(0px, -5px);
    }
}

/* 导航栏动画效果 */
main {
    width: 92%;
    overflow: hidden;
    margin: 10px auto;
}

main img {
    width: 18px;
}

.fenlei1 {
    width: 4%;
    overflow: hidden;
    margin-right: 15px;
    float: left;
    text-align: center;
    font-size: 14px;
}

.fenlei1 a {
    width: 78%;
    height: 40px;
    margin-left: 5px;
    float: left;
    border-radius: 50%;
    color: black;
}

.fenlei1 img {
    width: 60%;
    margin-top: 7px;
}

/* 分类一 */
.fenlei2 {
    width: 70%;
    overflow: hidden;
    float: left;
}

.fenlei2 a {
    width: 8%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 5px;
    border-radius: 5px;
    font-size: 14px;
    float: left;
    color: #61666d;
    background-color: #f6f7f8;
}

.fenlei2 a:hover {
    background-color: #c8d0db;
}

.fenlei2 span:hover {
    background-color: #c8d0db;
}

/* 分类二 */
.fanju,
.guochuang {
    line-height: 30px;
    padding: 5px 10px;
    position: absolute;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.5s ease;
    background-color: white;
}

.fanju {
    top: 100px;
}

.guochuang {
    top: 100px;
    left: 285px;
}

.fanju p:hover {
    border-radius: 5px;
    background-color: #c8d0db;
}

.guochuang p:hover {
    border-radius: 5px;
    background-color: #c8d0db;
}

.fj:hover .fanju {
    opacity: 1;
}

.gc:hover .guochuang {
    opacity: 1;
}

.gd table {
    position: absolute;
    top: 250px;
    right: 250px;
    padding: 5px 10px;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.5s ease;
    background-color: white;

}

.gd td {
    padding: 0px 5px;
    border-radius: 5px;
}

.gd td:hover {
    background-color: #c8d0db;
}

.gd td a {
    width: 90%;
    text-align: left;
    background-color: rgba(255, 255, 255, 0);
}

.gd:hover table {
    opacity: 1;
}

/* 分类隐藏栏 */
.fenlei3 {
    width: 18%;
    float: right;
    text-align: center;
    border-left: 1px solid #c8d0db;
    padding-left: 10px;
}

.fenlei3 a {
    width: 25%;
    height: 30px;
    line-height: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    font-size: 14px;
    float: left;
    color: #61666d;
}

.fenlei3 div a:last-child {
    width: 35%;
}

.fenlei3 a:hover {
    color: #00aeec;
}

/* 分类三 */
article {
    width: 92%;
    margin: auto;
}

.guangao {
    width: 38%;
    height: 400px;
    overflow: hidden;
    border-radius: 5px;
    float: left;
    background-color: #a5252596;
}

.guangao a {
    width: 100%;
    overflow: hidden;
    float: left;
}

.guangao a img {
    width: 100%;
}

.guangao span {
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    font-size: 18px;
    font-weight: bold;
    color: white;
}

.guangao div {
    width: 6%;
    height: 8%;
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 5px;
    float: right;
    background-color: #ffffff1a;
}

.guangao div img {
    width: 95%;
}

.guangao div:hover {
    background-color: #f1f2f3a7;
}

/* 广告 */
.video {
    width: 60%;
    overflow: hidden;
    float: right;
}

.video div {
    width: 30%;
    margin: 5px 10px;
    float: left;
}

.video img {
    width: 100%;
    border-radius: 5px;
}

.video a {
    overflow: hidden;
    height: 45px;
    float: left;
    font-size: 15px;
}

.video span {
    font-size: 13px;
    float: left;
    margin-top: 3px;
    margin-bottom: 20px;
    margin-right: 3px;
    color: #9499a0;
}

.video span:nth-last-child(3) {
    height: 13px;
    line-height: 13px;
    margin-top: 5px;
    border: 2px solid #9499a0;
    border-radius: 5px;
    font-size: 12px;
}

.video span:last-child {
    margin-left: 5px;
}

.video p:hover {
    color: #00aeec;
}

.video span:hover {
    color: #00aeec;
}

/* 视频 */
.video2 {
    width: 100%;
    overflow: hidden;
    margin: 20px auto;
}

.video2 div {
    width: 18%;
    margin: 5px 10px;
    float: left;
}

.video2 img {
    width: 100%;
    border-radius: 5px;
}

.video2 a {
    width: 100%;
    overflow: hidden;
    height: 45px;
    float: left;
    font-size: 15px;
}

.video2 span {
    font-size: 13px;
    float: left;
    margin-top: 3px;
    margin-bottom: 20px;
    margin-right: 3px;
    color: #9499a0;
}

.video2 span:nth-last-child(3) {
    height: 13px;
    line-height: 13px;
    margin-top: 5px;
    border: 2px solid #9499a0;
    border-radius: 5px;
    font-size: 12px;
}

.video2 span:last-child {
    margin-left: 5px;
}

.video2 p:hover {
    color: #00aeec;
}

.video2 span:hover {
    color: #00aeec;
}

/* 视频2 */
footer {
    margin-top: 40px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: #727272;
}

footer span {
    margin-right: 10px;
}

footer a {
    margin-right: 10px;
    color: #727272;
}

footer a:hover {
    color: #00aeec;
}

footer div:last-child {
    width: 50%;
    margin: 30px auto;
}

footer img {
    width: 15%;
    margin-right: 20px;
}

/* 页脚 */
.celan {
    width: 20px;
    padding: 5px;
    top: 270px;
    right: 45px;
    position: absolute;
    border: 2px solid #9499a0;
    border-radius: 5px;
    text-align: center;
    font-size: 12px;
}

.celan2 {
    width: 40px;
    top: 480px;
    right: 40px;
    position: fixed;
    text-align: center;
    font-size: 12px;
}

.celan2 img {
    width: 30px;
    margin-top: 5px;
}

.celan2 div {
    width: 40px;
    height: 40px;
    margin: 10px 5px;
    border-radius: 5px;
    background-color: #f1f2f3a7;
}

/* 侧栏 */